<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴jq</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .accordion{
            width: 1000px;
            height: 400px;
        }
        .accordion div{
            float: left;
            width: 100px;
            height: 400px;
            transition: all ease 1s;
        }
    </style>
</head>
<body>
<div class="accordion">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    $(function () {
        var accordion=$(".accordion");//获取 .accordion
        var Div=accordion.children("div");//获取 .accordion>div
        for (var i=0;i<Div.length;i++){
            Div.eq(i).css("background-image","url(imgs/"+(i+1)+".jpg)");
        };//塞图片
        Div.hover(function () {//添加hover事件，移入，移出两个事件
            $(this).css("width",600);//前：hover所处元素width=600px；
            $(this).siblings().css("width",100);//前：不在hover所处元素width=100px;
        },function () {
            $(this).css("width",100);//后：width=100px;
        })
    })
</script>
</body>
</html>